<template>
    <div class="c-collapse">
            <div class="collapse">
                <a-spin size="large" :spinning="spinning" tip="修改中, 请稍后...">
                    <a-collapse v-model:activeKey="activeKey" accordion>
                        <a-collapse-panel :key="dk" :header="dk" v-for="(dv, dk) in data">
                            <a-collapse v-model:activeKey="activeKeySub" accordion>
                                <a-collapse-panel key="1" header="中午">
                                    <div class="f-grid">
                                        <div class="grid-body" v-for="(ndv, ndk) in dv['noon']">
                                            <div><p>{{ ndk }}</p></div>
                                            <div>
                                                <a-image :width="200" :height="200" class="image" :src="ndv['cover']" v-if="String(ndv['cover']).length!=0"/>
                                                <div class="div-upload" v-if="String(ndv['cover']).length == 0">
                                                    <a-upload class="upload" list-type="picture-card" :before-upload="beforeUpload" accept=".jpg,.png,.jpeg" @change="handleUploadChange($event,dk,'noon',ndk)">
                                                        <div v-if="fileList.length < 1">
                                                            <plus-outlined />
                                                            <div style="margin-top: 8px">添加美食图片</div>
                                                        </div>
                                                </a-upload>
                                                </div>
                                            </div>
                                            <div><a-rate v-model:value="ndv['score']" allow-half @change="handleRateChange($event,dk,'noon',ndk)"/></div>
                                            <div class="delimg" @click="handleRemoveImg(dk,'noon',ndk)" v-if="String(ndv['cover']).length!=0"><p>删除封面</p></div>
                                        </div>
                                    </div>
                                </a-collapse-panel>
                                <a-collapse-panel key="2" header="晚上">
                                    <div class="f-grid">
                                        <div class="grid-body" v-for="(ndv, ndk) in dv['night']">
                                            <div><p>{{ ndk }}</p></div>
                                            <div>
                                                <a-image :width="200" :height="200" class="image" :src="ndv['cover']" v-if="String(ndv['cover']).length!=0"/>
                                                <div class="div-upload" v-if="String(ndv['cover']).length == 0">
                                                    <a-upload class="upload" list-type="picture-card" :before-upload="beforeUpload" accept=".jpg,.png,.jpeg" @change="handleUploadChange($event,dk,'night',ndk)">
                                                        <div v-if="fileList.length < 1">
                                                            <plus-outlined />
                                                            <div style="margin-top: 8px">添加美食图片</div>
                                                        </div>
                                                </a-upload>
                                                </div>
                                            </div>
                                            <div><a-rate v-model:value="ndv['score']" allow-half @change="handleRateChange($event,dk,'night',ndk)"/></div>
                                            <div class="delimg"  @click="handleRemoveImg(dk,'noon',ndk)" v-if="String(ndv['cover']).length!=0"><p>删除封面</p></div>
                                        </div>
                                    </div>
                                </a-collapse-panel>
                            </a-collapse>
                        </a-collapse-panel>
                    </a-collapse>
                </a-spin>
            </div>
        <div class="pagination">
            <a-pagination v-model:current="currentPage" show-quick-jumper showSizeChanger v-model:page-size="pageSize" :defaultPageSize="20" :pageSizeOptions="['10','20','30','50']" :total="total" @change="onChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { UploadProps } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { public_msg_error, public_msg_success } from '@/utils/amsg';
import { score_data, score_upd_cover, score_upd_score, score_del_cover } from '@/api';

const data = ref({});
const total = ref(0);
const pageSize = ref(20);
const currentPage = ref(1);
const spinning = ref(false);
const activeKey = ref([]);
const activeKeySub = ref([]);
const fileList:any = ref([]);

const getData = () => {
    score_data(pageSize.value, currentPage.value).then((res:any)=>{
        if (res.code == 0) {
            data.value = res.data;
            total.value = res.total;
        }else public_msg_error(res.msg)
    })
};
const onChange = (page: number, pagesize: number) => {
    currentPage.value = page;
    pageSize.value = pagesize;
    getData();
};
const handleRateChange = (score, date, time, food) => {
    spinning.value = true;
    score_upd_score(date, time, food, score).then((res:any)=>{
        if (res.code == 0) {
            public_msg_success(res.msg);
            getData();
        }else public_msg_error(res.msg);
    });
    spinning.value = false;
};
const handleUploadChange = (file, date: string, time: string, food: any) => {
    spinning.value = true;
    const formdata = new FormData();
    formdata.append("file", file.file);
    formdata.append("date", date);
    formdata.append('time', time);
    formdata.append('food', food);
    score_upd_cover(formdata).then((res:any)=>{
        if (res.code == 0) {
            public_msg_success(res.msg);
            getData();
            fileList.value = [];
        }else public_msg_error(res.msg);
    });
    spinning.value = false;
};
const handleRemoveImg = (date: string, time: string, food: any) => {
    spinning.value = true;
    score_del_cover(date, time, food).then((res:any)=>{
        if (res.code == 0) {
            public_msg_success(res.msg);
            getData();
        }else public_msg_error(res.msg);
    });
    spinning.value = false;
}
const beforeUpload: UploadProps['beforeUpload'] = file => {
    fileList.value = [...(fileList.value || []), file];
    return false;
};
onMounted(()=>{getData()});
</script>

<style scoped lang="less">
.c-collapse {
    height: 100%;
    width: auto;
    overflow: auto;
    user-select: none;
    .collapse {
        height: calc(100% - 35px);
        overflow: auto;
        .f-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            .grid-body {
                display: flex;
                flex-direction: column;
                flex: 1;
                text-align: center;
                div {
                    .div-upload {
                        border: 1px dashed #ccc;
                        width: 200px;
                        height: 200px;
                        display: flex;
                        margin: auto;
                        align-items: center;
                        border-radius: 10px;
                    }
                }
                .delimg {
                    visibility: hidden;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    color: #ccc;
                    &:hover {
                        color: orange;
                    }
                }
                &:hover {
                    .delimg {
                        visibility: visible;
                    }
                }
            }
        }
    }
    .pagination {
        height: 35px;
    }
}
</style>